# ====================================
# 第一阶段：构建阶段（Builder Stage）
# 使用Node.js环境编译前端应用
# ====================================
FROM node:20-alpine AS builder

# 设置工作目录为 /app
WORKDIR /app

# ====================================
# 依赖安装优化：先复制依赖文件
# 利用Docker层缓存，只有依赖变化时才重新安装
# ====================================
# 复制package.json文件（包含项目依赖信息）
COPY package.json ./
# 复制pnpm锁定文件（确保依赖版本一致性）
COPY pnpm-lock.yaml ./

# 全局安装pnpm包管理器（比npm更快更高效）
RUN npm install -g pnpm

# 安装项目依赖（基于pnpm-lock.yaml确保版本一致）
RUN pnpm install

# ====================================
# 源代码复制和构建
# ====================================
# 复制所有源代码到容器工作目录
COPY . .

# 执行uni-app的H5构建命令，生成静态文件
RUN pnpm run build:h5

# ====================================
# 调试信息：检查构建输出（可选，用于排查问题）
# ====================================
# 列出工作目录内容，确认构建产物
RUN echo "=== 检查/app目录结构 ==="
RUN ls -la /app/
RUN echo "=== 检查是否存在dist目录 ==="
RUN ls -la /app/dist/ || echo "dist目录不存在"
RUN echo "=== 查找所有HTML、JS、CSS文件 ==="
RUN find /app -name "*.html" -o -name "*.js" -o -name "*.css" | head -20
RUN echo "=== 检查dist目录下的所有内容 ==="
RUN find /app/dist/ -type f | head -30 || echo "dist目录为空或不存在"
RUN echo "=== 检查dist/build/h5目录下的所有内容 ==="
RUN find /app/dist/build/h5 -type f | head -30 || echo "dist目录为空或不存在"
RUN echo "=== 检查可能的构建输出目录 ==="
RUN find /app -type d -name "*build*" -o -name "*dist*" -o -name "*output*" | head -10

# ====================================
# 第二阶段：生产阶段（Production Stage）
# 使用轻量级nginx镜像提供静态文件服务
# ====================================
FROM nginx:alpine

# 从构建阶段复制编译好的静态文件到nginx默认目录
# /app/dist/build/h5 是uni-app H5构建的输出目录
COPY --from=builder /app/dist/build/h5 /usr/share/nginx/html

# 复制自定义nginx配置文件，覆盖默认配置
# 包含API代理和SPA路由支持配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口（HTTP默认端口）
EXPOSE 80

# 启动nginx服务，以前台模式运行（适合容器环境）
CMD ["nginx", "-g", "daemon off;"]
    